<template>
    <div class="shopHeader">
        <div class="shopHeader-bom">
            <group class="header-info">
                <cell>
                    <span class="shop-name" slot="after-title">{{shop.shopHeaderState.shopName}}
                        <span v-show="shop.shopHeaderState.isMana" @click="showEdit" class="shop-edit">设置</span>
                    </span>
                    <div v-show="shop.shopHeaderState.shopIntroduct!=''" class="shop-shopIntroduct" slot="inline-desc">{{shop.shopHeaderState.shopIntroduct|introduct}}</div>
                    <div v-show="shop.shopHeaderState.shopIntroduct==''" class="shop-shopIntroduct" slot="inline-desc">我的微门店</div>
                    <img slot="icon" width="45" style="display:block;margin-right:5px;border-radius: 5px;" :src="shop.shopHeaderState.header">
                    <span slot="value">
                        <span v-show="shop.shopHeaderState.isShowDetl=='1'||shop.shopHeaderState.isMana">
                            <img class="shop-img" width="20" src="~assets/x3/ico/shop-detl.png">
                            <span class="shop-font-title">&nbsp成交量
                                <span>{{shop.shopHeaderState.acDetl}}</span>&nbsp</span>
                        </span>
                        <img @click="setDetlState('1')" v-show="shop.shopHeaderState.isMana&&shop.shopHeaderState.isShowDetl=='0'" class="shop-font" width="20" src="~assets/x3/shop/hide3x.png">
                        <img @click="setDetlState('0')" v-show="shop.shopHeaderState.isMana&&shop.shopHeaderState.isShowDetl=='1'" class="shop-font" width="20" src="~assets/x3/shop/open3x.png">
                        </br>
                        <span v-show="shop.shopHeaderState.isShowHot=='1'||shop.shopHeaderState.isMana">
                            <img class="shop-img" width="20" src="~assets/x3/ico/shop-hot.png">
                            <span class="shop-font-title shop-font-hot">&nbsp人
                                <span style="margin-left: 9px;">气</span>
                                <span>{{shop.shopHeaderState.acHot}}</span>&nbsp</span>
                        </span>
                        <img @click="setHotState('1')" v-show="shop.shopHeaderState.isMana&&shop.shopHeaderState.isShowHot=='0'" class="shop-font" width="20" src="~assets/x3/shop/hide3x.png">
                        <img @click="setHotState('0')" v-show="shop.shopHeaderState.isMana&&shop.shopHeaderState.isShowHot=='1'" class="shop-font" width="20" src="~assets/x3/shop/open3x.png">

                    </span>
                </cell>
            </group>

            <!-- <div class="shopHeader-name">
                <div style="float: left;">
                    <img class="shop-header-img" width="20" src="~assets/x3/ico/头像@3x.png">
                </div>
                <div style="float: left;">
                    <div class="shop-name">&nbsp&nbsp{{shop.shopHeaderState.shopName}}的店铺</div>
                    <div class="shop-shopIntroduct">&nbsp&nbsp{{shop.shopHeaderState.shopIntroduct}}</div>
                </div>
            </div> -->

            <!-- <div class="shopHeader-info">
                <div class="shop-deal" style="margin-bottom: 2px;">
                    <img @click="setDetlState('1')" v-show="shop.shopHeaderState.isMana&&shop.shopHeaderState.isShowDetl=='0'" class="shop-font" width="20" src="~assets/x3/shop/hide3x.png">
                    <img @click="setDetlState('0')" v-show="shop.shopHeaderState.isMana&&shop.shopHeaderState.isShowDetl=='1'" class="shop-font" width="20" src="~assets/x3/shop/open3x.png">
                    <span v-show="shop.shopHeaderState.isShowDetl=='1'||shop.shopHeaderState.isMana">
                        <span class="shop-font">&nbsp{{shop.shopHeaderState.acDetl}}&nbsp</span>
                        <img class="shop-img" width="20" src="~assets/x3/ico/shop-detl.png">
                        <span class="shop-font-title">&nbsp成交量 </span>
                    </span>

                </div>
                <div class="shop-deal" style="margin-top: 2px;">
                    <img @click="setHotState('1')" v-show="shop.shopHeaderState.isMana&&shop.shopHeaderState.isShowHot=='0'" class="shop-font" width="20" src="~assets/x3/shop/hide3x.png">
                    <img @click="setHotState('0')" v-show="shop.shopHeaderState.isMana&&shop.shopHeaderState.isShowHot=='1'" class="shop-font" width="20" src="~assets/x3/shop/open3x.png">
                    <span v-show="shop.shopHeaderState.isShowHot=='1'||shop.shopHeaderState.isMana">
                        <span class="shop-font">&nbsp{{shop.shopHeaderState.acHot}}&nbsp</span>
                        <span class="shop-font">&nbsp&nbsp</span>
                        <img class="shop-img" width="20" src="~assets/x3/ico/shop-hot.png">
                        <span class="shop-font-title">&nbsp人&nbsp&nbsp&nbsp气</span>
                    </span>

                </div>
            </div> -->
            <x-dialog v-model="shopEdit" class="dialog-Einv" hide-on-blur>
                <div>
                    <div class="dialog__Einv--div">
                        <group class="SendEmail__formPolicy--group">
                            <cell class="SendEmail__Einv--title">
                                <span class="SendEmail__list--title" slot="after-title">
                                    <span class="SendEmail__iconspan"></span>
                                    <span class="SendEmail__iconspan--title">店铺信息修改&nbsp</span>
                                </span>
                            </cell>
                            <div class="SendEmail__formPolicy">
                                <x-input v-model="name" :max="10" placeholder="店铺名字">
                                    <div class="common__input " slot="label">
                                        <img src="~assets/x3/ico/icon-shopname.png" class="icon-img">&nbsp&nbsp
                                    </div>
                                </x-input>
                            </div>
                            <div class="SendEmail__formPolicy">
                                <x-textarea v-model="shopIntroduct" :max="25" :autosize="true" name="description" placeholder="店铺介绍">
                                    <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-int.png" class="icon-img">&nbsp&nbsp</div>
                                </x-textarea>
                            </div>

                        </group>
                        <div v-show="shop.saveShopInfoMsg!=''" class="common_errorMsg">
                            <badge text="!"></badge>
                            <span>{{shop.saveShopInfoMsg}}</span>
                        </div>
                    </div>
                    <x-button @click.native="saveEdit()" class="save-edit" mini type="primary">保存</x-button>
                    <!-- <x-button @click.native="close()" mini>取消</x-button> -->
                </div>
            </x-dialog>
        </div>
    </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
import { Cell, CellBox, CellFormPreview, Group, Badge, XDialog, XInput, XButton, XTextarea } from 'vux'
import { Mutations, RouteUrl } from "src/common/const";
import { mapState } from "vuex";
export default {
    computed: mapState([
        "user",
        "shop",
        "saveInsure",
        "isShop"
    ]),
    components: {
        Group,
        Cell,
        CellFormPreview,
        CellBox,
        Badge,
        XDialog,
        XInput,
        XButton,
        XTextarea,
    },
    filters: {
        introduct(val) {
            if (val.length > 25) {
                return val.substring(0, 25) + "...";
            }
            return val;
        },
    },
    watch: {
        // 'shop.shopHeaderState.isShowDetl': {
        //     handler: (val, oldVal) => {
        //         // localStorage["isShowDetl"] = val;
        //         this.isShowDetl = val;
        //     },
        // },
        // 'shop.shopHeaderState.isShowHot': {
        //     handler: (val, oldVal) => {
        //         // localStorage["isShowHot"] = val;
        //         this.isShowHot = val;
        //     },
        // }
    },
    data() {
        return {
            isShopProManage: false,
            shopEdit: false,
            // isShowDetl: '0',
            // isShowHot: '0'
            haveError: false,
            name: "",
            shopIntroduct: "",


        };
    },
    beforeRouteEnter(to, from, next) {
        localStorage["IS_SHOP_PRO_MANAGE"] = from.path;
        next();
    },
    methods: {
        showEdit() {
            this.shopEdit = !this.shopEdit;
            this.name = this.shop.shopHeaderState.shopName;
            this.shopIntroduct = this.shop.shopHeaderState.shopIntroduct;
            let queryDaya = {
                _this: this,
                type: "cleck",
            }
            this.$common.storeCommit(this, Mutations.SHOP_INFO_SAVE, queryDaya);
        },
        saveEdit() {
            let queryDaya = {
                type: "save",
                shopName: this.name,
                introduct: this.shopIntroduct,
                userCode: this.user.userDto.userCode,
                _this: this,
            }
            // alert(this.user.userDto.userCode);
            this.$common.storeCommit(this, Mutations.SHOP_INFO_SAVE, queryDaya);
        },
        setDetlState(val) {
            this.$common.storeCommit(this, Mutations.SET_IS_SHOW_DETL, val);
            // this.isShowDetl = val;
        },
        setHotState(val) {
            this.$common.storeCommit(this, Mutations.SET_IS_SHOW_HOT, val);
            // this.isShowHot = val;
        },
        // init() {
        //     let _this = this;
        //     let type = "";
        //     if (localStorage["IS_SHOP_PRO_MANAGE"] == RouteUrl.SHOP_MANAGE) {
        //         type = "acc";
        //     }
        //     //登录用户
        //     if (this.$route.path == RouteUrl.SHOP_MANAGE && this.user.isLogin) {
        //         this.isShopProManage = true;
        //         this.detl = this.user.userDto.typeState[0];
        //         this.hot = this.user.userDto.typeState[1];
        //     } else {
        //         this.isShopProManage = false;
        //     }
        //     let queryUserCode = "";
        //     if (this.isShop && this.saveInsure.refereeData != false) {
        //         queryUserCode = this.saveInsure.refereeData.userCode;
        //     } else if (this.user.isLogin) {
        //         queryUserCode = this.user.userDto.userCode;
        //     }

        //     if (queryUserCode != "") {
        //         let query = {
        //             userCode: queryUserCode,
        //             TYPE: "FORM",
        //             type: type
        //         }
        //         this.$http.post(RequestUrl.FIND_SHOP_INFO, query).then(function(res) {
        //             let shopType = res.result.shopState + "";
        //             _this.acDetl = shopType[0];
        //             _this.acHot = shopType[1];
        //             _this.acDetlNumber = res.result.volume;
        //             _this.acHotNumber = res.result.popularity;
        //         });
        //     }
        // }
    },
    beforeDestroy() {
        // if (this.isShopProManage) {
        //     let state = this.detl + this.hot;
        //     if (state != this.user.userDto.typeState) {
        //         let query = {
        //             stateType: state,
        //             userCode: this.user.userDto.userCode,
        //             TYPE: "FORM"
        //         }
        //         this.$http.post(RequestUrl.SET_STATE_TYPE, query).then(function(res) {
        //         });
        //     }
        // }
    },
    mounted() {
        let _this = this;
        // _this.init();
    }
}
</script>

<style lang="scss" >
.save-edit {
  float: right;
  margin-right: 15px;
  margin-top: 8px;
}
.shopHeader {
  z-index: 999; // display: block;
  // width: 100%;
  background: url(~assets/x3/ba3x.jpg) rgba(0, 0, 0, 0.6) no-repeat;
  width: 100%;
  height: 21vh;
  background-size: 100% 100%;
  position: relative;
}

.detl {
  display: block;
}

.shop-header-img {
  width: 6vh;
  height: 6vh;
  float: left;
}

.shopHeader-bom {
  // margin-top: 12vh;
  margin-left: 3%;
  margin-right: 3%;
  padding-top: 5.5vh;
}

.shopHeader-name {
  float: left;
}

.shop-name {
  //   line-height: 6vh;
  font-size: 16px;
  color: #fff;
}

.shop-deal {
  clear: both;
}

.shop-font-title {
  color: #fff;
  display: block;
  line-height: 22px;
  font-size: 12px;
  float: left;
}

.shop-font {
  //   display: block;
  line-height: 22px;
  font-size: 12px;
  //   float: right;
}

.shop-img {
  float: left;
  display: block;
}

.shopHeader-info {
  float: right;
  color: #fff;
}
.shop-shopIntroduct {
  font-size: 12px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  margin-right: 5px;
}
// .shopHeader-bom {
//   div {
//     .weui-cells {
//       background-color: rgba(0, 0, 0, 0);
//     }
//   }
// }
.header-info {
  color: #fff;
  .weui-cells:before {
    border-top: 0px solid #d9d9d9;
  }
  .weui-cells:after {
    border-bottom: 0px solid #d9d9d9;
  }
  .weui-cells {
    background-color: rgba(0, 0, 0, 0) !important;
  }
}
.shop-edit {
  font-size: 10px;
  background-color: #fff;
  color: #c8161d;
  border-radius: 10px;
  padding: 2px 7px;
}
.SendEmail__list--title {
  float: left;
  font-size: 15px;
  color: #c8161d;
  border-top: 1px solid #fff;
}

.SendEmail__iconspan {
  position: absolute;
  margin-top: 3px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.SendEmail__iconspan--title {
  margin-left: 9px;
  font-size: 16px;
}

.SendEmail__Einv--title {
  border-top: 1px solid #fff;
  margin-left: -8px;
}

.SendEmail__formPolicy {
  border-top: 1px solid #e7e7e7 !important;
  border: 1px solid #e7e7e7;
  border-top: 0px;
  margin: 0 5px;
}

.SendEmail__formPolicy--group {
  padding: 0px 10px; // .vux-no-group-title {
  //     padding-bottom: 20px;
  // }
}

.dialog__Einv--div {
  margin-top: -7px;
}

.dialog__Einv--btn {
  float: right;
  margin-right: 13px;
}
</style>
